// import React, { useState, useEffect, useRef } from 'react';
// import axios from 'axios';
// import TaskForm from './TaskForm';
// import TaskCard from './TaskCard';
// import TaskDetail from './TaskDetail';
// import { DndProvider } from 'react-dnd';
// import { HTML5Backend } from 'react-dnd-html5-backend';
// import { useDrag, useDrop } from 'react-dnd';
// import './cywindex.css';
// import dayjs from 'dayjs'; // 引入 dayjs
// // 定义任务的接口
// interface Task {
//   _id: string;
//   title: string;
//   description: string;
//   assignee: string;
//   dueDate: string;
//   tags: string;
//   status: string;
//   project_id: string;
//   sortOrder: number; // 确保 sortOrder 在 Task 接口中定义
// }

// // 定义拖拽项的接口
// interface DraggableTask {
//   type: 'task';
//   id: string;
// }
// // 定义归档任务的接口
// interface ArchivedTask {
//   _id: string;
//   title: string;
//   description: string;
//   assignee: string;
//   dueDate: string;
//   tags: string;
//   status: string;
//   project_id: string;
//   completed_at: string;
//   archived_at: string;
// }
// const DraggableTaskCard: React.FC<{
//   task: Task;
//   moveTask: (dragId: string, hoverId: string) => void;
//   tasks: Task[];
//   onStatusChange: (taskId: string, newStatus: string) => void;
//   targetStatus: string; // 目标列的状态
//   onOpenDetail: (taskId: string) => void; // 新增，接收打开详情弹窗的回调
//   onArchive: (taskId: string) => void; // 新增，归档任务的回调
// }> = ({ task, moveTask, tasks, onStatusChange, targetStatus, onOpenDetail,onArchive }) => {
//   const [{ isDragging }, drag] = useDrag({
//     type: 'task',
//     item: () => ({ id: task._id, type: 'task' }),
//     end: (item, monitor) => {
//       const dropResult = monitor.getDropResult<{ status: string }>();
//       if (dropResult) {
//         onStatusChange(item.id, dropResult.status);
//       }
//     },
//     collect: (monitor) => ({
//       isDragging: monitor.isDragging(),
//     }),
//   });

//   const [, drop] = useDrop({
//     accept: 'task',
//     drop: () => ({ status: targetStatus }), // 返回目标列的状态
//     hover: (item: DraggableTask) => {
//       const dragId = item.id;
//       const hoverId = task._id;
//       if (dragId !== hoverId) {
//         console.log('Hovering task:', dragId, 'over task:', hoverId);
//         const hoverIndex = tasks.findIndex((t) => t._id === hoverId);
//         if (hoverIndex !== -1) {
//           moveTask(dragId, hoverId);
//         }
//       }
//     },
//   });

//   const ref = useRef<HTMLDivElement>(null);
//   drag(drop(ref));

//   return (
//     <div
//       ref={ref}
//       style={{
//         opacity: isDragging ? 0.5 : 1,
//         cursor: 'move',
//       }}
//     >
//       <TaskCard
//         title={task.title}
//         description={task.description}
//         assignee={task.assignee}
//         dueDate={task.dueDate}
//         tags={task.tags}
//         taskId={task._id}
//         onOpenDetail={onOpenDetail} // 传递给TaskCard
//         onArchive={onArchive} // 传递归档任务的回调
//       />
//     </div>
//   );
// };

// const App: React.FC = () => {
//   const [tasks, setTasks] = useState<Task[]>([]);
//   const [showArchivedTasks, setShowArchivedTasks] = useState(false); // 新增，控制归档任务列表的显示
//   const [archivedTasks, setArchivedTasks] = useState<ArchivedTask[]>([]); // 新增，存储归档任务列表

//   // 获取任务列表
//   const fetchTasks = async () => {
//     try {
//       const response = await axios.get('http://localhost:3000/cyw/tasks');
//       // 假设后端返回的任务数据中包含可用于排序的字段，如sortOrder
//       const sortedTasks = response.data.tasks.sort((a: Task, b: Task) => a.sortOrder - b.sortOrder);
//       setTasks(sortedTasks);
//     } catch (error) {
//       console.error('Error fetching tasks:', error);
//     }
//   };

//   useEffect(() => {
//     fetchTasks();
//   }, []);

//   // 处理任务移动的函数
//   const moveTask = async (dragId: string, hoverId: string) => {
//     const dragIndex = tasks.findIndex(task => task._id === dragId);
//     const hoverIndex = tasks.findIndex(task => task._id === hoverId);
//     const newTasks = [...tasks];
//     const [removed] = newTasks.splice(dragIndex, 1);
//     newTasks.splice(hoverIndex, 0, removed);
//     setTasks(newTasks);
//     try {
//       const response = await axios.put('http://localhost:3000/cyw/tasks/order', {
//         taskIds: newTasks.map(task => task._id)
//       });
//       setTasks(response.data.data); // 使用后端返回的更新后的任务列表更新本地状态
//     } catch (error) {
//       console.error('Error updating task order:', error);
//     }
//   };

//   // 处理任务状态更新的函数
//   const onStatusChange = async (taskId: string, newStatus: string) => {
//     try {
//       await axios.put(`http://localhost:3000/cyw/tasks/${taskId}`, { status: newStatus });
//       // 不需要调用 fetchTasks，直接更新本地状态
//       setTasks(prevTasks => prevTasks.map(task =>
//         task._id === taskId ? { ...task, status: newStatus } : task
//       ));
//     } catch (error) {
//       console.error('Error updating task status:', error);
//     }
//   };

//   // 根据状态分组任务
//   const groupTasksByStatus = (tasks: Task[]) => {
//     return {
//       todo: tasks.filter(task => task.status === 'todo'),
//       doing: tasks.filter(task => task.status === 'doing'),
//       done: tasks.filter(task => task.status === 'done'),
//     };
//   };

//   const groupedTasks = groupTasksByStatus(tasks);
//   const [showDetail, setShowDetail] = useState<string | null>(null);

//   const handleOpenDetail = (taskId: string) => {
//     setShowDetail(taskId);
//   };
//    // 新增，处理任务归档的函数
// const onArchive = async (taskId: string) => {
//   try {
//     await axios.post(`http://localhost:3000/cyw/archive/${taskId}`);
//     fetchTasks(); // 重新获取任务列表，更新看板
//     alert('任务已成功归档'); // 提示用户归档成功
//   } catch (error) {
//     console.error('Error archiving task:', error);
//     alert('归档任务出错，请稍后重试'); // 提示用户归档失败
//   }
// };

//   // 新增，获取归档任务列表的函数
//   const fetchArchivedTasks = async () => {
//     try {
//       const response = await axios.get('http://localhost:3000/cyw/archivedTasks');
//       setArchivedTasks(response.data.archivedTasks);
//     } catch (error) {
//       console.error('Error fetching archived tasks:', error);
//     }
//   };
// // 新增，处理恢复任务的函数
// const restoreTask = async (archivedTaskId: string) => {
//   try {
//     await axios.post(`http://localhost:3000/cyw/restore/${archivedTaskId}`);
//     fetchTasks(); // 重新获取任务列表，更新看板
//     fetchArchivedTasks(); // 重新获取归档任务列表，更新归档任务显示
//     alert('任务已成功恢复');
//   } catch (error) {
//     console.error('Error restoring task:', error);
//     alert('恢复任务出错，请稍后重试');
//   }
// };

//   return (
//     <DndProvider backend={HTML5Backend}>
//       <div className="App">
//         <TaskForm onTaskCreated={fetchTasks} />
//         <div className="task-board">
//           {/* 待处理列 */}
//           <div className="task-column">
//             <h2>待处理</h2>
//             {groupedTasks.todo.map(task => (
//               <DraggableTaskCard
//                 key={task._id}
//                 task={task}
//                 moveTask={moveTask}
//                 tasks={tasks}
//                 onStatusChange={onStatusChange}
//                 targetStatus="todo"
//                 onOpenDetail={handleOpenDetail}
//                 onArchive={onArchive} // 传递归档任务的回调
//               />
//             ))}
//           </div>

//           {/* 进行中列 */}
//           <div className="task-column">
//             <h2>进行中</h2>
//             {groupedTasks.doing.map(task => (
//               <DraggableTaskCard
//                 key={task._id}
//                 task={task}
//                 moveTask={moveTask}
//                 tasks={tasks}
//                 onStatusChange={onStatusChange}
//                 targetStatus="doing"
//                 onOpenDetail={handleOpenDetail}
//                 onArchive={onArchive} // 传递归档任务的回调
//               />
//             ))}
//           </div>

//           {/* 已完成列 */}
//           <div className="task-column">
//             <h2>已完成</h2>
//             {groupedTasks.done.map(task => (
//               <DraggableTaskCard
//                 key={task._id}
//                 task={task}
//                 moveTask={moveTask}
//                 tasks={tasks}
//                 onStatusChange={onStatusChange}
//                 targetStatus="done"
//                 onOpenDetail={handleOpenDetail}
//                 onArchive={onArchive} // 传递归档任务的回调
//               />
//             ))}
//           </div>
//         </div>
//         {showDetail && <TaskDetail taskId={showDetail} />}
//         <button onClick={() => {
//           if (!showArchivedTasks) {
//             fetchArchivedTasks();
//           }
//           setShowArchivedTasks(!showArchivedTasks);
//         }}>
//           {showArchivedTasks? '隐藏归档任务' : '查看归档任务'}
//         </button>
//         {showArchivedTasks && (
//           <div>
//             <h2>归档任务</h2>
//             {archivedTasks.map(task => (
//               <div key={task._id}>
//                 {/* <p>{task.title}</p>
//                 <p>负责人: {task.assignee}</p>
//                 <p>截止日期: {task.dueDate}</p>
//                 <p>完成时间: {task.completed_at}</p>
//                 <p>归档时间: {task.archived_at}</p>
//                 <button onClick={() => restoreTask(task._id)}>恢复任务</button> */}
//                 <p>{task.title}</p>
//                 <p>负责人: {task.assignee}</p>
//                 <p>截止日期: {dayjs(task.dueDate).format('YYYY-MM-DD HH:mm:ss')}</p>
//                 <p>完成时间: {task.completed_at? dayjs(task.completed_at).format('YYYY-MM-DD HH:mm:ss') : '无'}</p>
//                 <p>归档时间: {dayjs(task.archived_at).format('YYYY-MM-DD HH:mm:ss')}</p>
//                 <button onClick={() => restoreTask(task._id)}>恢复任务</button>
//               </div>
//             ))}
//           </div>
//         )}
//       </div>
//     </DndProvider>
//   );
// };

// export default App;














// import React, { useState, useEffect, useRef } from 'react';
// import { Link } from'react-router-dom'; // 引入Link用于跳转
// import axios from 'axios';
// import TaskCard from './TaskCard';
// import TaskDetail from './TaskDetail';
// import { DndProvider } from 'react-dnd';
// import { HTML5Backend } from 'react-dnd-html5-backend';
// import { useDrag, useDrop } from 'react-dnd';
// import './cywindex.css';
// import dayjs from 'dayjs'; // 引入 dayjs
// // 定义任务的接口
// interface Task {
//   _id: string;
//   title: string;
//   description: string;
//   assignee: string;
//   dueDate: string;
//   tags: string;
//   status: string;
//   project_id: string;
//   sortOrder: number; // 确保 sortOrder 在 Task 接口中定义
// }

// // 定义拖拽项的接口
// interface DraggableTask {
//   type: 'task';
//   id: string;
// }
// // 定义归档任务的接口
// interface ArchivedTask {
//   _id: string;
//   title: string;
//   description: string;
//   assignee: string;
//   dueDate: string;
//   tags: string;
//   status: string;
//   project_id: string;
//   completed_at: string;
//   archived_at: string;
// }
// const DraggableTaskCard: React.FC<{
//   task: Task;
//   moveTask: (dragId: string, hoverId: string) => void;
//   tasks: Task[];
//   onStatusChange: (taskId: string, newStatus: string) => void;
//   targetStatus: string; // 目标列的状态
//   onOpenDetail: (taskId: string) => void; // 新增，接收打开详情弹窗的回调
//   onArchive: (taskId: string) => void; // 新增，归档任务的回调
// }> = ({ task, moveTask, tasks, onStatusChange, targetStatus, onOpenDetail,onArchive }) => {
//   const [{ isDragging }, drag] = useDrag({
//     type: 'task',
//     item: () => ({ id: task._id, type: 'task' }),
//     end: (item, monitor) => {
//       const dropResult = monitor.getDropResult<{ status: string }>();
//       if (dropResult) {
//         onStatusChange(item.id, dropResult.status);
//       }
//     },
//     collect: (monitor) => ({
//       isDragging: monitor.isDragging(),
//     }),
//   });

//   const [, drop] = useDrop({
//     accept: 'task',
//     drop: () => ({ status: targetStatus }), // 返回目标列的状态
//     hover: (item: DraggableTask) => {
//       const dragId = item.id;
//       const hoverId = task._id;
//       if (dragId !== hoverId) {
//         console.log('Hovering task:', dragId, 'over task:', hoverId);
//         const hoverIndex = tasks.findIndex((t) => t._id === hoverId);
//         if (hoverIndex !== -1) {
//           moveTask(dragId, hoverId);
//         }
//       }
//     },
//   });

//   const ref = useRef<HTMLDivElement>(null);
//   drag(drop(ref));

//   return (
//     <div
//       ref={ref}
//       style={{
//         opacity: isDragging ? 0.5 : 1,
//         cursor: 'move',
//       }}
//     >
//       <TaskCard
//         title={task.title}
//         description={task.description}
//         assignee={task.assignee}
//         dueDate={task.dueDate}
//         tags={task.tags}
//         taskId={task._id}
//         onOpenDetail={onOpenDetail} // 传递给TaskCard
//         onArchive={onArchive} // 传递归档任务的回调
//       />
//     </div>
//   );
// };

// const App: React.FC = () => {
//   const [tasks, setTasks] = useState<Task[]>([]);
//   const [showArchivedTasks, setShowArchivedTasks] = useState(false); // 新增，控制归档任务列表的显示
//   const [archivedTasks, setArchivedTasks] = useState<ArchivedTask[]>([]); // 新增，存储归档任务列表

//   // 获取任务列表
//   const fetchTasks = async () => {
//     try {
//       const response = await axios.get('http://localhost:3000/cyw/tasks');
//       // 假设后端返回的任务数据中包含可用于排序的字段，如sortOrder
//       const sortedTasks = response.data.tasks.sort((a: Task, b: Task) => a.sortOrder - b.sortOrder);
//       setTasks(sortedTasks);
//     } catch (error) {
//       console.error('Error fetching tasks:', error);
//     }
//   };

//   useEffect(() => {
//     fetchTasks();
//   }, []);

//   // 处理任务移动的函数
//   const moveTask = async (dragId: string, hoverId: string) => {
//     const dragIndex = tasks.findIndex(task => task._id === dragId);
//     const hoverIndex = tasks.findIndex(task => task._id === hoverId);
//     const newTasks = [...tasks];
//     const [removed] = newTasks.splice(dragIndex, 1);
//     newTasks.splice(hoverIndex, 0, removed);
//     setTasks(newTasks);
//     try {
//       const response = await axios.put('http://localhost:3000/cyw/tasks/order', {
//         taskIds: newTasks.map(task => task._id)
//       });
//       setTasks(response.data.data); // 使用后端返回的更新后的任务列表更新本地状态
//     } catch (error) {
//       console.error('Error updating task order:', error);
//     }
//   };

//   // 处理任务状态更新的函数
//   const onStatusChange = async (taskId: string, newStatus: string) => {
//     try {
//       await axios.put(`http://localhost:3000/cyw/tasks/${taskId}`, { status: newStatus });
//       // 不需要调用 fetchTasks，直接更新本地状态
//       setTasks(prevTasks => prevTasks.map(task =>
//         task._id === taskId ? { ...task, status: newStatus } : task
//       ));
//     } catch (error) {
//       console.error('Error updating task status:', error);
//     }
//   };

//   // 根据状态分组任务
//   const groupTasksByStatus = (tasks: Task[]) => {
//     return {
//       todo: tasks.filter(task => task.status === 'todo'),
//       doing: tasks.filter(task => task.status === 'doing'),
//       done: tasks.filter(task => task.status === 'done'),
//     };
//   };

//   const groupedTasks = groupTasksByStatus(tasks);
//   const [showDetail, setShowDetail] = useState<string | null>(null);

//   const handleOpenDetail = (taskId: string) => {
//     setShowDetail(taskId);
//   };
//    // 新增，处理任务归档的函数
// const onArchive = async (taskId: string) => {
//   try {
//     await axios.post(`http://localhost:3000/cyw/archive/${taskId}`);
//     fetchTasks(); // 重新获取任务列表，更新看板
//     alert('任务已成功归档'); // 提示用户归档成功
//   } catch (error) {
//     console.error('Error archiving task:', error);
//     alert('归档任务出错，请稍后重试'); // 提示用户归档失败
//   }
// };

//   // 新增，获取归档任务列表的函数
//   const fetchArchivedTasks = async () => {
//     try {
//       const response = await axios.get('http://localhost:3000/cyw/archivedTasks');
//       setArchivedTasks(response.data.archivedTasks);
//     } catch (error) {
//       console.error('Error fetching archived tasks:', error);
//     }
//   };
// // 新增，处理恢复任务的函数
// const restoreTask = async (archivedTaskId: string) => {
//   try {
//     await axios.post(`http://localhost:3000/cyw/restore/${archivedTaskId}`);
//     fetchTasks(); // 重新获取任务列表，更新看板
//     fetchArchivedTasks(); // 重新获取归档任务列表，更新归档任务显示
//     alert('任务已成功恢复');
//   } catch (error) {
//     console.error('Error restoring task:', error);
//     alert('恢复任务出错，请稍后重试');
//   }
// };

//   return (
//     <DndProvider backend={HTML5Backend}>
//       <div className="App">
//       <Link to="/task-form" className='btn-primary'>+&nbsp;新建任务</Link> {/* 使用Link组件实现跳转 */}
//         <div className="task-board">
//           {/* 待处理列 */}
//           <div className="task-column">
//             <h2>待处理</h2>
//             {groupedTasks.todo.map(task => (
//               <DraggableTaskCard
//                 key={task._id}
//                 task={task}
//                 moveTask={moveTask}
//                 tasks={tasks}
//                 onStatusChange={onStatusChange}
//                 targetStatus="todo"
//                 onOpenDetail={handleOpenDetail}
//                 onArchive={onArchive} // 传递归档任务的回调
//               />
//             ))}
//           </div>
//           {/* 进行中列 */}
//           <div className="task-column">
//             <h2>进行中</h2>
//             {groupedTasks.doing.map(task => (
//               <DraggableTaskCard
//                 key={task._id}
//                 task={task}
//                 moveTask={moveTask}
//                 tasks={tasks}
//                 onStatusChange={onStatusChange}
//                 targetStatus="doing"
//                 onOpenDetail={handleOpenDetail}
//                 onArchive={onArchive} // 传递归档任务的回调
//               />
//             ))}
//           </div>

//           {/* 已完成列 */}
//           <div className="task-column">
//             <h2>已完成</h2>
//             {groupedTasks.done.map(task => (
//               <DraggableTaskCard
//                 key={task._id}
//                 task={task}
//                 moveTask={moveTask}
//                 tasks={tasks}
//                 onStatusChange={onStatusChange}
//                 targetStatus="done"
//                 onOpenDetail={handleOpenDetail}
//                 onArchive={onArchive} // 传递归档任务的回调
//               />
//             ))}
//           </div>
//         </div>
//         {showDetail && <TaskDetail taskId={showDetail} />}
//         <button onClick={() => {
//           if (!showArchivedTasks) {
//             fetchArchivedTasks();
//           }
//           setShowArchivedTasks(!showArchivedTasks);
//         }}>
//           {showArchivedTasks? '隐藏归档任务' : '查看归档任务'}
//         </button>
//         {showArchivedTasks && (
//           <div>
//             <h2>归档任务</h2>
//             {archivedTasks.map(task => (
//               <div key={task._id}>
//                 {/* <p>{task.title}</p>
//                 <p>负责人: {task.assignee}</p>
//                 <p>截止日期: {task.dueDate}</p>
//                 <p>完成时间: {task.completed_at}</p>
//                 <p>归档时间: {task.archived_at}</p>
//                 <button onClick={() => restoreTask(task._id)}>恢复任务</button> */}
//                 <p>{task.title}</p>
//                 <p>负责人: {task.assignee}</p>
//                 <p>截止日期: {dayjs(task.dueDate).format('YYYY-MM-DD HH:mm:ss')}</p>
//                 <p>完成时间: {task.completed_at? dayjs(task.completed_at).format('YYYY-MM-DD HH:mm:ss') : '无'}</p>
//                 <p>归档时间: {dayjs(task.archived_at).format('YYYY-MM-DD HH:mm:ss')}</p>
//                 <button onClick={() => restoreTask(task._id)}>恢复任务</button>
//               </div>
//             ))}
//           </div>
//         )}
//       </div>
//     </DndProvider>
//   );
// };

// export default App;





// import React, { useState, useEffect, useRef } from 'react';
// import { Link } from'react-router-dom';
// import axios from 'axios';
// import TaskCard from './TaskCard';
// import TaskDetail from './TaskDetail';
// import { DndProvider } from 'react-dnd';
// import { HTML5Backend } from 'react-dnd-html5-backend';
// import { useDrag, useDrop } from'react-dnd';
// import './cywindex.css';
// import dayjs from 'dayjs';

// // 定义任务的接口
// interface Task {
//   _id: string;
//   title: string;
//   description: string;
//   assignee: string;
//   dueDate: string;
//   tags: string;
//   status: string;
//   project_id: string;
//   sortOrder: number;
// }

// // 定义拖拽项的接口
// interface DraggableTask {
//   type: 'task';
//   id: string;
// }
// // 定义归档任务的接口
// interface ArchivedTask {
//   _id: string;
//   title: string;
//   description: string;
//   assignee: string;
//   dueDate: string;
//   tags: string;
//   status: string;
//   project_id: string;
//   completed_at: string;
//   archived_at: string;
// }
// const DraggableTaskCard: React.FC<{
//   task: Task;
//   moveTask: (dragId: string, hoverId: string) => void;
//   tasks: Task[];
//   onStatusChange: (taskId: string, newStatus: string) => void;
//   targetStatus: string;
//   onOpenDetail: (taskId: string) => void;
//   onArchive: (taskId: string) => void;
// }> = ({ task, moveTask, tasks, onStatusChange, targetStatus, onOpenDetail, onArchive }) => {
//   const [{ isDragging }, drag] = useDrag({
//     type: 'task',
//     item: () => ({ id: task._id, type: 'task' }),
//     end: (item, monitor) => {
//       const dropResult = monitor.getDropResult<{ status: string }>();
//       if (dropResult) {
//         onStatusChange(item.id, dropResult.status);
//       }
//     },
//     collect: (monitor) => ({
//       isDragging: monitor.isDragging(),
//     }),
//   });

//   const [, drop] = useDrop({
//     accept: 'task',
//     drop: () => ({ status: targetStatus }),
//     hover: (item: DraggableTask) => {
//       const dragId = item.id;
//       const hoverId = task._id;
//       if (dragId!== hoverId) {
//         console.log('Hovering task:', dragId, 'over task:', hoverId);
//         const hoverIndex = tasks.findIndex((t) => t._id === hoverId);
//         if (hoverIndex!== -1) {
//           moveTask(dragId, hoverId);
//         }
//       }
//     },
//   });

//   const ref = useRef<HTMLDivElement>(null);
//   drag(drop(ref));

//   return (
//     <div
//       ref={ref}
//       style={{
//         opacity: isDragging? 0.5 : 1,
//         cursor: 'move',
//       }}
//     >
//       <TaskCard
//         title={task.title}
//         description={task.description}
//         assignee={task.assignee}
//         dueDate={task.dueDate}
//         tags={task.tags}
//         taskId={task._id}
//         onOpenDetail={onOpenDetail}
//         onArchive={onArchive}
//       />
//     </div>
//   );
// };

// const App: React.FC = () => {
//   const [tasks, setTasks] = useState<Task[]>([]);
//   const [showArchivedTasks, setShowArchivedTasks] = useState(false);
//   const [archivedTasks, setArchivedTasks] = useState<ArchivedTask[]>([]);
//   const [selectedTask, setSelectedTask] = useState<Task | null>(null); // 新增状态存储选中任务

//   // 获取任务列表
//   const fetchTasks = async () => {
//     try {
//       const response = await axios.get('http://localhost:3000/cyw/tasks');
//       const sortedTasks = response.data.tasks.sort((a: Task, b: Task) => a.sortOrder - b.sortOrder);
//       setTasks(sortedTasks);
//     } catch (error) {
//       console.error('Error fetching tasks:', error);
//     }
//   };

//   useEffect(() => {
//     fetchTasks();
//   }, []);

//   // 处理任务移动的函数
//   const moveTask = async (dragId: string, hoverId: string) => {
//     const dragIndex = tasks.findIndex(task => task._id === dragId);
//     const hoverIndex = tasks.findIndex(task => task._id === hoverId);
//     const newTasks = [...tasks];
//     const [removed] = newTasks.splice(dragIndex, 1);
//     newTasks.splice(hoverIndex, 0, removed);
//     setTasks(newTasks);
//     try {
//       const response = await axios.put('http://localhost:3000/cyw/tasks/order', {
//         taskIds: newTasks.map(task => task._id)
//       });
//       setTasks(response.data.data);
//     } catch (error) {
//       console.error('Error updating task order:', error);
//     }
//   };

//   // 处理任务状态更新的函数
//   const onStatusChange = async (taskId: string, newStatus: string) => {
//     try {
//       await axios.put(`http://localhost:3000/cyw/tasks/${taskId}`, { status: newStatus });
//       setTasks(prevTasks => prevTasks.map(task =>
//         task._id === taskId? {...task, status: newStatus } : task
//       ));
//     } catch (error) {
//       console.error('Error updating task status:', error);
//     }
//   };

//   // 根据状态分组任务
//   const groupTasksByStatus = (tasks: Task[]) => {
//     return {
//       todo: tasks.filter(task => task.status === 'todo'),
//       doing: tasks.filter(task => task.status === 'doing'),
//       done: tasks.filter(task => task.status === 'done'),
//     };
//   };

//   const groupedTasks = groupTasksByStatus(tasks);

//   // 新增，处理任务归档的函数
//   const onArchive = async (taskId: string) => {
//     try {
//       await axios.post(`http://localhost:3000/cyw/archive/${taskId}`);
//       fetchTasks();
//       alert('任务已成功归档');
//     } catch (error) {
//       console.error('Error archiving task:', error);
//       alert('归档任务出错，请稍后重试');
//     }
//   };

//   // 新增，获取归档任务列表的函数
//   const fetchArchivedTasks = async () => {
//     try {
//       const response = await axios.get('http://localhost:3000/cyw/archivedTasks');
//       setArchivedTasks(response.data.archivedTasks);
//     } catch (error) {
//       console.error('Error fetching archived tasks:', error);
//     }
//   };

//   // 新增，处理恢复任务的函数
//   const restoreTask = async (archivedTaskId: string) => {
//     try {
//       await axios.post(`http://localhost:3000/cyw/restore/${archivedTaskId}`);
//       fetchTasks();
//       fetchArchivedTasks();
//       alert('任务已成功恢复');
//     } catch (error) {
//       console.error('Error restoring task:', error);
//       alert('恢复任务出错，请稍后重试');
//     }
//   };

//   const handleOpenDetail = (taskId: string) => {
//     const selected = tasks.find(task => task._id === taskId);
//     setSelectedTask(selected || null);
//   };

//   return (
//     <DndProvider backend={HTML5Backend}>
//       <div className="App">
//         <Link to="/task-form" className='btn-primary'>+&nbsp;新建任务</Link>
//         <div className="layout">
//           <div className="task-board">
//             {/* 待处理列 */}
//             <div className="task-column">
//               <h2>待处理</h2>
//               {groupedTasks.todo.map(task => (
//                 <DraggableTaskCard
//                   key={task._id}
//                   task={task}
//                   moveTask={moveTask}
//                   tasks={tasks}
//                   onStatusChange={onStatusChange}
//                   targetStatus="todo"
//                   onOpenDetail={handleOpenDetail}
//                   onArchive={onArchive}
//                 />
//               ))}
//             </div>
//             {/* 进行中列 */}
//             <div className="task-column">
//               <h2>进行中</h2>
//               {groupedTasks.doing.map(task => (
//                 <DraggableTaskCard
//                   key={task._id}
//                   task={task}
//                   moveTask={moveTask}
//                   tasks={tasks}
//                   onStatusChange={onStatusChange}
//                   targetStatus="doing"
//                   onOpenDetail={handleOpenDetail}
//                   onArchive={onArchive}
//                 />
//               ))}
//             </div>

//             {/* 已完成列 */}
//             <div className="task-column">
//               <h2>已完成</h2>
//               {groupedTasks.done.map(task => (
//                 <DraggableTaskCard
//                   key={task._id}
//                   task={task}
//                   moveTask={moveTask}
//                   tasks={tasks}
//                   onStatusChange={onStatusChange}
//                   targetStatus="done"
//                   onOpenDetail={handleOpenDetail}
//                   onArchive={onArchive}
//                 />
//               ))}
//             </div>
//           </div>
//           <div className="task-detail">
//             {selectedTask && <TaskDetail task={selectedTask} />}
//           </div>
//         </div>
//         <button onClick={() => {
//           if (!showArchivedTasks) {
//             fetchArchivedTasks();
//           }
//           setShowArchivedTasks(!showArchivedTasks);
//         }}>
//           {showArchivedTasks? '隐藏归档任务' : '查看归档任务'}
//         </button>
//         {showArchivedTasks && (
//           <div>
//             <h2>归档任务</h2>
//             {archivedTasks.map(task => (
//               <div key={task._id}>
//                 <p>{task.title}</p>
//                 <p>负责人: {task.assignee}</p>
//                 <p>截止日期: {dayjs(task.dueDate).format('YYYY-MM-DD HH:mm:ss')}</p>
//                 <p>完成时间: {task.completed_at? dayjs(task.completed_at).format('YYYY-MM-DD HH:mm:ss') : '无'}</p>
//                 <p>归档时间: {dayjs(task.archived_at).format('YYYY-MM-DD HH:mm:ss')}</p>
//                 <button onClick={() => restoreTask(task._id)}>恢复任务</button>
//               </div>
//             ))}
//           </div>
//         )}
//       </div>
//     </DndProvider>
//   );
// };

// export default App;



import React, { useState, useEffect, useRef } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
import TaskCard from './TaskCard';
import TaskDetail from './TaskDetail';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { useDrag, useDrop } from 'react-dnd';
import './cywindex.css';
import dayjs from 'dayjs';
// 定义任务的接口
interface Task {
  _id: string;
  title: string;
  description: string;
  assignee: string;
  dueDate: string;
  tags: string;
  status: string;
  project_id: string;
  sortOrder: number;
}

// 定义拖拽项的接口
interface DraggableTask {
  type: 'task';
  id: string;
}
// 定义归档任务的接口
interface ArchivedTask {
  _id: string;
  title: string;
  description: string;
  assignee: string;
  dueDate: string;
  tags: string;
  status: string;
  project_id: string;
  completed_at: string;
  archived_at: string;
}
const DraggableTaskCard: React.FC<{
  task: Task;
  moveTask: (dragId: string, hoverId: string) => void;
  tasks: Task[];
  onStatusChange: (taskId: string, newStatus: string) => void;
  targetStatus: string;
  onOpenDetail: (taskId: string) => void;
  onArchive: (taskId: string) => void;
}> = ({ task, moveTask, tasks, onStatusChange, targetStatus, onOpenDetail, onArchive }) => {
  const [{ isDragging }, drag] = useDrag({
    type: 'task',
    item: () => ({ id: task._id, type: 'task' }),
    end: (item, monitor) => {
      const dropResult = monitor.getDropResult<{ status: string }>();
      if (dropResult) {
        onStatusChange(item.id, dropResult.status);
      }
    },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  });

  const [, drop] = useDrop({
    accept: 'task',
    drop: () => ({ status: targetStatus }),
    hover: (item: DraggableTask) => {
      const dragId = item.id;
      const hoverId = task._id;
      if (dragId !== hoverId) {
        console.log('Hovering task:', dragId, 'over task:', hoverId);
        const hoverIndex = tasks.findIndex((t) => t._id === hoverId);
        if (hoverIndex !== -1) {
          moveTask(dragId, hoverId);
        }
      }
    },
  });

  const ref = useRef<HTMLDivElement>(null);
  drag(drop(ref));

  return (
    <div
      ref={ref}
      style={{
        opacity: isDragging ? 0.5 : 1,
        cursor: 'move',
      }}
    >
      <TaskCard
        title={task.title}
        description={task.description}
        assignee={task.assignee}
        dueDate={task.dueDate}
        tags={task.tags}
        taskId={task._id}
        onOpenDetail={onOpenDetail}
        onArchive={onArchive}
      />
    </div>
  );
};

const App: React.FC = () => {
  const [tasks, setTasks] = useState<Task[]>([]);
  const [showArchivedTasksModal, setShowArchivedTasksModal] = useState(false); // 新增状态控制归档任务弹框显示
  const [archivedTasks, setArchivedTasks] = useState<ArchivedTask[]>([]);
  const [selectedTask, setSelectedTask] = useState<Task | null>(null);

  // 获取任务列表
  const fetchTasks = async () => {
    try {
      const response = await axios.get('http://localhost:3000/cyw/tasks');
      const sortedTasks = response.data.tasks.sort((a: Task, b: Task) => a.sortOrder - b.sortOrder);
      setTasks(sortedTasks);
    } catch (error) {
      console.error('Error fetching tasks:', error);
    }
  };

  useEffect(() => {
    fetchTasks();
  }, []);

  // 处理任务移动的函数
  const moveTask = async (dragId: string, hoverId: string) => {
    const dragIndex = tasks.findIndex(task => task._id === dragId);
    const hoverIndex = tasks.findIndex(task => task._id === hoverId);
    const newTasks = [...tasks];
    const [removed] = newTasks.splice(dragIndex, 1);
    newTasks.splice(hoverIndex, 0, removed);
    setTasks(newTasks);
    try {
      const response = await axios.put('http://localhost:3000/cyw/tasks/order', {
        taskIds: newTasks.map(task => task._id)
      });
      setTasks(response.data.data);
    } catch (error) {
      console.error('Error updating task order:', error);
    }
  };

  // 处理任务状态更新的函数
  const onStatusChange = async (taskId: string, newStatus: string) => {
    try {
      await axios.put(`http://localhost:3000/cyw/tasks/${taskId}`, { status: newStatus });
      setTasks(prevTasks => prevTasks.map(task =>
        task._id === taskId ? { ...task, status: newStatus } : task
      ));
    } catch (error) {
      console.error('Error updating task status:', error);
    }
  };

  // 根据状态分组任务
  const groupTasksByStatus = (tasks: Task[]) => {
    return {
      todo: tasks.filter(task => task.status === 'todo'),
      doing: tasks.filter(task => task.status === 'doing'),
      done: tasks.filter(task => task.status === 'done'),
    };
  };

  const groupedTasks = groupTasksByStatus(tasks);

  // 新增，处理任务归档的函数
  const onArchive = async (taskId: string) => {
    try {
      await axios.post(`http://localhost:3000/cyw/archive/${taskId}`);
      fetchTasks();
      alert('任务已成功归档');
    } catch (error) {
      console.error('Error archiving task:', error);
      alert('归档任务出错，请稍后重试');
    }
  };

  // 新增，获取归档任务列表的函数
  const fetchArchivedTasks = async () => {
    try {
      const response = await axios.get('http://localhost:3000/cyw/archivedTasks');
      setArchivedTasks(response.data.archivedTasks);
    } catch (error) {
      console.error('Error fetching archived tasks:', error);
    }
  };

  // 新增，处理恢复任务的函数
  const restoreTask = async (archivedTaskId: string) => {
    try {
      await axios.post(`http://localhost:3000/cyw/restore/${archivedTaskId}`);
      fetchTasks();
      fetchArchivedTasks();
      alert('任务已成功恢复');
    } catch (error) {
      console.error('Error restoring task:', error);
      alert('恢复任务出错，请稍后重试');
    }
  };

  const handleOpenDetail = (taskId: string) => {
    const selected = tasks.find(task => task._id === taskId);
    setSelectedTask(selected || null);
  };

  return (
    <DndProvider backend={HTML5Backend}>
      <div className="App">
        <Link to="/task-form" className='btn-primary' 
        >+&nbsp;新建任务</Link>
        <div className="layout">
          <div className="task-board">
            {/* 待处理列 */}
            <div className="task-column">
              <h2>待处理</h2>
              {groupedTasks.todo.map(task => (
                <DraggableTaskCard
                  key={task._id}
                  task={task}
                  moveTask={moveTask}
                  tasks={tasks}
                  onStatusChange={onStatusChange}
                  targetStatus="todo"
                  onOpenDetail={handleOpenDetail}
                  onArchive={onArchive}
                />
              ))}
            </div>
            {/* 进行中列 */}
            <div className="task-column">
              <h2>进行中</h2>
              {groupedTasks.doing.map(task => (
                <DraggableTaskCard
                  key={task._id}
                  task={task}
                  moveTask={moveTask}
                  tasks={tasks}
                  onStatusChange={onStatusChange}
                  targetStatus="doing"
                  onOpenDetail={handleOpenDetail}
                  onArchive={onArchive}
                />
              ))}
            </div>

            {/* 已完成列 */}
            <div className="task-column">
              <h2>已完成</h2>
              {groupedTasks.done.map(task => (
                <DraggableTaskCard
                  key={task._id}
                  task={task}
                  moveTask={moveTask}
                  tasks={tasks}
                  onStatusChange={onStatusChange}
                  targetStatus="done"
                  onOpenDetail={handleOpenDetail}
                  onArchive={onArchive}
                />
              ))}
            </div>
          </div>
          {/* 归档 */}
          <div className="task-detail">
            <button className='archive-btn' onClick={() => {
              if (!showArchivedTasksModal) {
                fetchArchivedTasks();
              }
              setShowArchivedTasksModal(!showArchivedTasksModal);
            }}>
              {showArchivedTasksModal ? '隐藏归档任务' : '查看归档任务'}
            </button>
            {selectedTask && <TaskDetail task={selectedTask} />}
          </div>
        </div>
        {showArchivedTasksModal && (
          <div className="modal-overlay" onClick={() => setShowArchivedTasksModal(false)}>
            <div className="modal-content" onClick={(e) => e.stopPropagation()}>
              <h2>归档任务</h2>
              {archivedTasks.map(task => (
                <div key={task._id}>
                  <p>{task.title}</p>
                  <p>负责人: {task.assignee}</p>
                  <p>截止日期: {dayjs(task.dueDate).format('YYYY-MM-DD HH:mm:ss')}</p>
                  <p>完成时间: {task.completed_at ? dayjs(task.completed_at).format('YYYY-MM-DD HH:mm:ss') : '无'}</p>
                  <p>归档时间: {dayjs(task.archived_at).format('YYYY-MM-DD HH:mm:ss')}</p>
                  <button onClick={() => restoreTask(task._id)}>恢复任务</button>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </DndProvider>
  );
};

export default App;